<template>
    <a-modal v-model:open="data.open" width="800px" centered :maskClosable="false" :title="props.title"
        @cancel="handleCancel" wrap-class-name="custom-modal-wrap" destroyOnClose>
        <div class="editor-box">
            <monacoEditor ref="monacoEditorRef" :height="data.height" :width="data.width" v-model="data.codeData"
                :readOnly="false" valueFormat="json" :minimap="true" language="json" :lineNumbers="true"
                :folding="true"></monacoEditor>
        </div>
        <template #footer>
            <!-- <a-button size="small" @click="handleFormat">格式化</a-button> -->
            <a-button type="primary" danger size="small" @click="handleReset">清空</a-button>
            <a-button type="primary" size="small" @click="handleSave">保存</a-button>
        </template>
    </a-modal>
</template>

<script setup>
import { ref, reactive, watch } from 'vue'
import monacoEditor from '../monacoEditor/monacoEditor.vue';

const monacoEditorRef = ref(null);

const emit = defineEmits(['saveCodeData','test']);

const props = defineProps({
    title: {
        type: String,
        default: '编辑数据'
    },
})

const data = reactive({
    open: false,
    codeData: null
})



const open = (value) => {
    data.open = true
    if (value) {
        data.codeData = value
    }

}

const close = () => {
    data.open = false
}

const handleCancel = () => {
    close();
}

// 清空
const handleReset = () => {
    data.codeData = ""
}

// 保存
const handleSave = () => {
    let stringData = JSON.stringify(data.codeData)
    // console.log("stringData:",stringData)
    emit('saveCodeData', data.codeData)
    handleCancel();
}


defineExpose({ open, close })

</script>

<style scoped>
.editor-box {
    height: 80vh;
    width: 100%;
}
</style>